<template>
  <div class="search-box p-10" :class="{'grade-box':gradeShow}">
    <el-select v-model="searchType" placeholder="请选择">
      <el-option 
        v-for="item in options"
        :key="item[resultKey]"
        :label="item[label]" 
        :value="item[resultKey]" 
        :disabled="item.disabled">
      </el-option>
    </el-select>
    <textarea class="el-textarea" placeholder="请输入关键字" v-model="searchText"></textarea>
    <div class="filter" v-show="gradeShow"><slot></slot></div>
    <div class="action-wrap">
      <div class="action">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="clear">清空</el-button>
        <span class="filter-text mr-10" @click="gradeShow=!gradeShow">{{gradeShow?'简易筛选':'高级筛选'}}</span>
      </div>
    </div>
  </div>
</template>
<script>

function getSearchType(obj, key) {
  if (obj && key) {
    return obj[key]
  } else {
    return obj
  }
}
export default {
  name: 'YfFilterBox',
  props: {
    options: {
      type: Array,
      default: []
    },
    label: {
      type: String,
      default: 'label'
    },
    resultKey: {
      type: String,
      default: 'value'
    },
    action: {
      type: Function
    },
    clearAction: {
      type: Function
    }
  },
  data() {
    return {
      gradeShow: false,
      searchType: this.options[0] ? getSearchType(this.options[0], this.resultKey) : '',
      searchText: ''
    }
  },
  methods: {
    search() {
      const arr = this.$slots.default
      const result = {}
      arr.forEach(function(v) {
        if (v.componentOptions) {
          Object.assign(result, v.componentOptions.propsData.result)
        }
      })
      result[this.searchType] = this.searchText
      this.$emit('input', result)
      this.action && this.action(result)
    },
    clear() {
      const result = {}
      this.searchText = ''
      this.$emit('input', result)
      this.clearAction && this.clearAction(result)
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
  @import '../../styles/mixin.scss';
  @import '../../styles/variables.scss';
  .search-box{
    .el-textarea{
      border-color: #dcdfe6;
      width: 300px;
      height: 37px;
      line-height: 30px;
    }
    .filter {

    }
    .action-wrap {
      display: inline-block;
    }
    .filter-text {
      color: $blue;
      cursor: pointer;
      margin-left: 10px;
    }
  }
  .grade-box {
    background: $gray;
    .action-wrap {
      display: block;
      @include clearfix();
      .action {
        float: right;
      }
    }
  }
</style>
